<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { TitleType } from './type'

const props = defineProps({
  item: {
    type: Object
  },
  type: {
    type: Number,
    default: TitleType.good
  }
})
let emits = defineEmits('doCollect')
</script>

<template>
  <view class="detail-title-container">
    <view class="title">{{ props.item.title }}</view>
    <view class="menu">
      <MidShareButton :item="item" />
      <!--      #ifdef H5-->
      <MidButton
        @tap="emits('doCollect', item.id)"
        icon-color="red"
        text="收藏"
        :name="
          props.item.good
            ? props.item.good.is_collected
              ? 'star0'
              : 'star1'
            : props.item.good.is_collected
            ? 'star0'
            : 'star1'
        "
      />
      <!--      #endif-->
      <!--      #ifdef MP-WEIXIN-->
      <u-icon
        name="star-fill"
        label="收藏"
        labelPos="bottom"
        labelSize="20rpx"
        color="#ff9800"
        size="40rpx"
        @tap="emits('doCollect', item.id)"
        v-if="
          props.type == TitleType.case
            ? props.item.is_collected
            : props.item.good.is_collected
        "
      ></u-icon>
      <u-icon
        label="收藏"
        labelPos="bottom"
        labelSize="20rpx"
        size="40rpx"
        name="star"
        color="#000"
        @tap="emits('doCollect', item.id)"
        v-else
      ></u-icon>
      <!--      #endif-->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.detail-title-container {
  display: flex;
  align-items: center;
  height: 110rpx;

  .title {
    flex: 80%;
    font-size: 32rpx;
  }

  .menu {
    flex: 20%;
    display: flex;
    justify-content: space-around;
  }
}
</style>
